import {AfterContentInit, Component, ContentChildren, Input, QueryList} from '@angular/core';
import {NzColDirective, NzFormControlComponent, NzFormLabelComponent, NzUpdateHostClassService} from "ng-zorro-antd";

@Component({
  selector: 'meta-form',
  template: `<ng-content></ng-content>`,
  providers: [NzUpdateHostClassService]
})
export class MetaFormComponent implements AfterContentInit {
  @ContentChildren(NzColDirective, {descendants: true}) colList: QueryList<NzColDirective>;
  @ContentChildren(NzFormLabelComponent, {descendants: true}) labelList: QueryList<NzFormLabelComponent>;
  @ContentChildren(NzFormControlComponent, {descendants: true}) ctlList: QueryList<NzFormControlComponent>;

  @Input() colSpan: number = 24;
  @Input() labelSpan: number = 6;
  @Input() ctlSpan: number = 17;

  constructor(
    private nzUpdateHostClassService: NzUpdateHostClassService) {

  }

  ngAfterContentInit(): void {
    // 设置NzCol的宽度
    if (this.colList) {
      this.colList.forEach(item => {
        if (!item.nzSpan) {
          item.nzSpan = this.colSpan;
          this.nzUpdateHostClassService.updateHostClass(item['el'], {[`ant-col-${this.colSpan}`]: [`ant-col-${this.colSpan}`]});
        }
      });
    }
    // 设置NzFormLabel的宽度
    if (this.labelList) {
      this.labelList.forEach(item => {
        if (!item.nzSpan) {
          item.nzSpan = this.labelSpan;
          this.nzUpdateHostClassService.updateHostClass(item['el'], {[`ant-col-${this.labelSpan}`]: [`ant-col-${this.labelSpan}`]});
        }
      });
    }
    // 设置NzFormControl的宽度
    if (this.ctlList) {
      this.ctlList.forEach(item => {
        if (!item.nzSpan) {
          item.nzSpan = this.ctlSpan;
          this.nzUpdateHostClassService.updateHostClass(item['el'], {[`ant-col-${this.ctlSpan}`]: [`ant-col-${this.ctlSpan}`]});
        }
      });
    }
  }
}
